<template>
	<view class="c-pload-avatar" :class="ggclass"
		:style="{borderRadius:radius,width:$rpxunit(size) ,height:$rpxunit(size),}">
		<slot>
			<image class="img" :style="{borderRadius:radius,width:$rpxunit(size),height:$rpxunit(size),}"
				:src="valUrl | imgFilter" @click="onImage" @load="load" @error="error">
			</image>
			<!-- #ifndef MP-TOUTIAO -->
			<c-loading class="loding" isOpenPattern :size="lodingS" :loading="isloding"></c-loading>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="upload-button" v-if="isUpload" @click="upload">
				<text class="iconfont icon-paizhao" style="color:#fff;" :style="{fontSize}"></text>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button class="upload-button" v-if="isUpload" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<text class="iconfont icon-paizhao" style="color:#fff;" :style="{fontSize}"></text>
			</button>
			<!-- #endif -->
		</slot>
	</view>
</template>

<script>
	import {
		defaultAvatar
	} from '../../static/img/base64.js'
	import {
		imgPreview
	} from '../ways/img.js'
	export default {
		name: 'c-upload-avatar',
		props: {
			ggclass: {
				type: String,
				default: ''
			},
			radius: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			api: {
				type: String,
				default: '/upload/image'
			},
			isPreview: {
				type: Boolean,
				default: false
			},
			isUpload: {
				type: Boolean,
				default: false
			},
			lazy: {
				type: Boolean,
				default: false
			},
			lodingSize: {
				type: [String, Number],
				default: ''
			},
			range_key: {
				type: String,
				default: 'url'
			},
		},
		data() {
			return {
				isloding: true,
				lazySrc: ''
			}
		},

		computed: {
			valUrl: {
				get() {
					// if (!this.lazy) {
					// 	this.authenticate()
					// }
					let a = this.lazy ? this.lazySrc : this.value
					return a || defaultAvatar
				},
				set(val) {
					this.$emit('input', val)
					this.$emit('change', val)
				}
			},
			fontSize() {
				return `${parseInt(this.size) /4}rpx`
			},
			lodingS: {
				get() {
					if (this.lodingSize) return this.lodingSize
					let unit = String(this.width).match(
						/[a-z|A-Z|'%']+/gi
					);
					return parseInt(this.width) / 2 + unit
				},
			},
		},
		async mounted() {
			if (this.lazy) {
				this.observer('.c-pload-avatar', (res) => {
					this.lazySrc = this.value || defaultAvatar
					// this.authenticate()
				})
			}
		},
		methods: {
			observer(node, callback) {
				let observer = uni.createIntersectionObserver(this)
				let ob = observer.relativeToViewport()
				ob.observe(node, (res) => {
					callback(res)
					observer.disconnect()
				})
			},
			// authenticate() {
			// 	setTimeout(() => {
			// 		if (this.lazy) {
			// 			if (!this.lazySrc) {
			// 				this.lazySrc = ' '
			// 			}
			// 		} else {
			// 			if (!this.value) {
			// 				this.valUrl = ' '
			// 			}
			// 		}
			// 	}, 10000)
			// },
			load() {
				this.isloding = false
			},
			error() {
				this.isloding = false
				this.valUrl = defaultAvatar
			},
			async onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.valUrl = await this.uploadFile(avatarUrl)
			},
			onImage(event) {
				if (this.isPreview) {
					imgPreview(this.valUrl)
				}
				this.$emit('click', event)
				this.$emit('tap', event)
			},
			upload() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						this.valUrl = await this.uploadFile(res.tempFiles[0].path)

					},

				})
			},
			/**
			 * 上传文件
			 * @param {string} v 文件路径
			 * @param {string} size 文件大小
			 */
			uploadFile(filePath) {
				uni.showToast({
					title: '上传中...',
					icon: 'loading'
				})
				return new Promise(async (ress, err) => {
					uni.uploadFile({
						url: this.$config.baseUrl + this.api,
						filePath,
						name: 'file',
						success:(res)=> {
							const data = JSON.parse(res.data);
							let url = data.result[this.range_key];
							ress(url)
						},
						fail(error) {
							err(error)
							console.log(error, 'error');
						},
						complete() {
							uni.hideToast();
						}
					});
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.c-pload-avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		// border: 2rpx solid #fff;
		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 200rpx;
		}
	}

	.upload-button {
		position: absolute;
		right: -10rpx;
		bottom: -5rpx;
		padding: 10rpx;
		background: $uni-color-main;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 64rpx;
		line-height: 1;
	}

	.loding {
		position: absolute;
	}
</style>